<template>
  <div class="login-wrap">
    <div class="login-form">
      <el-row type="flex" justify="center" class="login-table">
        <el-col :md="20">
          <!-- 登录模块 -->
          <div>
            <div class="form-title">拼团系统</div>
            <!--<el-tabs v-model="activeName">-->
              <!--<el-tab-pane label="用户登录界面" name="用户登录界面">-->
                <el-form
                  ref="form"
                  :model="form"
                  :rules="rules"
                  label-width="0px"
                  class="form-content"
                >
                  <el-form-item prop="username">
                    <el-input
                      v-model="form.username"
                      prefix-icon="el-icon-user"
                      placeholder="请填写账号"
                      clearable
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input
                      v-model="form.password"
                      prefix-icon="el-icon-lock"
                      placeholder="请输入密码"
                      clearable
                      @keyup.enter.native="login()"
                      show-password
                    >
                    </el-input>
                  </el-form-item>

                  <el-form-item prop="userType">
                    <el-radio-group
                      v-model="form.userType"
                      prefix-icon="el-icon-lock"
                    >
                      <el-radio label="1">团员</el-radio>
                      <el-radio label="2">团长</el-radio>
                      <el-radio label="3">管理员</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item>
                    <!-- `checked` 为 true 或 false -->
                    <el-checkbox v-model="checked1" style="color: white">自动登录</el-checkbox>
                    <router-link
                      to="/register"
                      type="primary"
                      :underline="false"
                      style="float: right;color: white"
                      >去注册</router-link
                    >
                  </el-form-item>
                  <el-form-item
                    class="text-center"
                    v-loading="this.$store.state.loading"
                  >
                    <el-button
                      type="primary"
                      style="width: 100%"
                      @click="login()"
                      >登录</el-button
                    >
                  </el-form-item>
                </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { login } from "../api/user";
export default {
  name: "login",
  data() {
    return {
      form: {
        username: "",
        password: "",
        userType: "1"
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        userType: [
          { required: true, message: "请选择用户类型", trigger: "blur" }
        ]
      },

      // activeName: "用户登录界面",
      checked1: "",
      // checked2: '',
      // form3: {},
      userList: []
      // show_login: true
    };
  },
  methods: {
    /*
     * 登陆
     * */
    login() {
      this.$refs.form.validate(valid => {
        if (valid) {
          login(
            this.form.username,
            this.form.password,
            this.form.userType
          ).then(res => {
            this.$message.success("登录成功: " + res.username);
            this.$store.commit("login", res);
            this.$router.push({ name: "container" });
          });
        }
      });
    }
    // register() {
    //   if (!this.form3.username) {
    //     this.$message.error("请输入用户名！");
    //     return;
    //   } else if (!this.form3.password) {
    //     this.$message.error("请输入密码！");
    //     return;
    //   } else if (this.form3.password !== this.form3.password2) {
    //     this.$message.error("两次输入的密码不匹配");
    //     return;
    //   }else {
    //     this.form3 = {
    //       username: "",
    //       password: "",
    //       userType: -1
    //     };
    //     this.editing = true;
    //     if (this.form3.username === "") {
    //       register(this.form3).then(() => {
    //         this.finishSave();
    //       });
    //     }
    //   }
    // },
    // finishSave() {
    //   this.$message.success("成功");
    //   this.getPage(this.pageIndex);
    //   this.editing = false;
    // }
  }
};
</script>

<style scoped>
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("../assets/login-background.jpg");
  background-size: 100% 100%;
}

.form-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-bottom: 1px solid #ddd;
}

.login-table {
}
.login-form {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -250px 0 0 -175px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.form-content {
  padding: 30px 30px;
}

.login-btn {
  text-align: center;
}

.login-btn button {
  width: 100%;
  height: 36px;
}
.el-radio {
  color: #fff;
}
</style>
